<template>
    <div class="new">
         <div class="head">
            <van-nav-bar
            title="标题"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            />
        </div>
        <div class="banner">
            <img src="./../../../assets/images/banner2.png" alt="">
        </div>
        <div class="sortNav">
            <div class="tab active" @click="change($event)">综合</div>
            <div class="tab asc"   @click="change($event)">价格</div>
            <div class="tab"  @click="change($event)">分类</div>
        </div>
         <div class="sortlist">
            <van-grid :column-num="2" :gutter="5">
                <van-grid-item  v-for=" item in goodslist" :key="item.id"  :to="`/cart/goods?id=${item.id}`">
                    <van-image :src="item.list_pic_url"  class="img"/>
                    <p class="name">{{item.name}}</p>
                    <p class="price">￥{{item.retail_price}}</p>
                </van-grid-item>
            </van-grid>
        </div>
    </div>
</template>

<script>
    import $ from 'jquery'
    import {goodsList} from '@/api/home/new'
    export default {
        data() {
            return {
                isActive:true,
                goodslist:[],
                order:''
            }
        },

        methods:{
             onClickLeft(){
                this.$router.go(-1);
                this.$store.commit('setInfo',"")
            
            },
            change($event){
                var flag =false;
                if(!$event.target.classList.contains('active')){
                    $event.target.classList.add('active')
                    $($event.target).siblings().removeClass('active')
                    this.order='';
                    if($event.target.classList.contains('asc')){
                        this.order='asc'
                    }
                    this.navClick;
                }
                else if(!flag&&$event.target.classList.contains('asc')){
                    $($event.target).removeClass('asc')
                    $($event.target).addClass('dsc');
                    flag=true
                    this.order="desc"
                     this.navClick;

                }
                else if($event.target.classList.contains('dsc')){
                    $($event.target).removeClass('dsc');
                    $($event.target).addClass('asc');
                    flag=false
                    this.order="asc"
                     this.navClick;
                }
            },

        },
        created() {
            goodsList({
                data:this.$route.query
            })
            .then(res=>{
                console.log(res);
                this.goodslist=res.data
            })
        }, 
        computed: {
            navClick(){
                var data=this.$route.query
                data.order=this.order
                goodsList({
                    data:data
                })
                .then(res=>{
                    console.log(res);
                    this.goodslist=res.data
                })
            }
        },
        mounted () {
            this.$router.afterEach((to, from, next) => {
                window.scrollTo(0, 0)
            })
        }  
    }
</script>

<style lang="scss" scoped>

@mixin guid-sty{

    .img{
        width: 150px;
        height: 150px;
        margin: 0 auto;
    }

    .name{
        margin: 7.5px 12px 0;
        text-align: center;
        padding: 0 10px;
        font-size: 12px;
    }
    .price{
        text-align: center;
        font-size: 15px;
        color: #b4282d;
        margin-bottom: 0;
    }
}
.head {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
}
.new{
    background-color: #eee;
    overflow: auto  ;
}

.banner {
    margin-top: 50px;

    img {
        width: 100%;
        height: 140px;
    }
}

.sortNav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;

    .tab {
        width: 33%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 12px;

    }
    .tab.active{
        color:#b4282d; 
    }
    .tab.asc{
        background: url('../../../assets/images/price_icon.png') no-repeat  80% center ;
        background-size: 8px 12px;
    }
    .tab.asc.active{
        background: url('../../../assets/images/dsc.png') no-repeat  80% center ;
        background-size: 8px 12px;
    }
    .tab.dsc.active{
        background: url('../../../assets/images/asc.png') no-repeat  80% center ;
        background-size: 8px 12px;
    }


}
.sortlist{
    margin-top: 10px;
    @include guid-sty;
}
</style>